<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<c:set var="user" value="${sessionScope.user}"/>
<!DOCTYPE html>
<html>

<head>
  <title>关联人主页</title>
</head>

<body>
<div class="myaccount">
  <div class="row">
    <div class="ucenter">
      <div class="ucenter-info mt10">
        <div class="info-title">
          <h5 style="display: inline-block;margin-left: 35%;">关联人信息</h5>
          <button class="BUTTON" id="addPerson" style="float: right;width: 80px;">添加关联人</button>
        </div>
        <%--显示关联人信息--%>
        <div id="person"></div>
      </div>
    </div>
  </div>
</div>
<%--添加关连人部分--%>
<div class="modal fade" id="add_Relative" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 5%;border: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">添加我的关联人</h4>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding-left: 5%;">
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="personName">自然人姓名</label>
            <input type="text" class="form-control" id="personName" placeholder="请输入自然人姓名">
            <%--<div id="s_username0" style="color: #FD3F31;display: none;">用户名长度过长，请重新输入</div>--%>
            <%--<div id="s_username1" style="color: #FD3F31;display: none;">用户名不能为空</div>--%>
            <%--<div id="s_username2" style="color: #FD3F31;display: none;">用户名已存在，请重新输入</div>--%>
            <%--<div id="s_username3" style="color: #43C608;display: none;">用户名合格</div>--%>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="idType">证件类型</label>
            <select class="form-control" id="idType" style="height: 48px;">
              <option>二代身份证</option>
              <option>港澳居民往来内地通行证</option>
              <option>台湾居民来往大陆通行证</option>
              <option>护照（外籍人士）</option>
            </select>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="idendity">证件号</label>
            <input type="text" class="form-control" id="idendity" placeholder="请选择证件号" oninput = "value=value.replace(/[^\d]/g,'')">
            <div id="idendity1" style="color: #FD3F31;display: none;">只能输入长度为18的数字，请重新输入</div>
            <div id="idendity2" style="color: #43C608;display: none;">证件号合格</div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="phoneA">手机号码</label>
            <input type="text" class="form-control" id="phoneA" placeholder="请输入手机号码" oninput = "value=value.replace(/[^\d]/g,'')">
            <div id="s_phone2A" style="color: #FD3F31;display: none;">请输入有效的手机号码</div>
            <div id="s_phone3A" style="color: #43C608;display: none;">手机号合格</div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="relation1">关系</label>
            <select class="form-control" id="relation1" style="height: 48px;">
              <option>本人</option>
              <option>父母</option>
              <option>子女</option>
              <option>亲人</option>
              <option>朋友</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-12">
            <%--<button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>--%>
              <input id="closeRelative" type="button" class="btn btn-primary BUTTON" value="关闭" style="float: right;">
            <input id="saveRelative" type="button" class="btn btn-primary BUTTON" value="保存" style="float: right;">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<%--修改关连人部分--%>
<div class="modal fade" id="modify_Relative" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 5%;border: none;">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">修改我的关联人</h4>
        <button type="button" class="btn btn-default" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="padding-left: 5%;">
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="R_personName">自然人姓名</label>
            <input type="text" class="form-control" id="R_personName" placeholder="请输入自然人姓名">
            <%--<div id="R_s_username0" style="color: #FD3F31;display: none;">用户名长度过长，请重新输入</div>--%>
            <%--<div id="R_s_username1" style="color: #FD3F31;display: none;">用户名不能为空</div>--%>
            <%--<div id="R_s_username2" style="color: #FD3F31;display: none;">用户名已存在，请重新输入</div>--%>
            <%--<div id="R_s_username3" style="color: #43C608;display: none;">用户名合格</div>--%>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="R_idType">证件类型</label>
            <select class="form-control" id="R_idType" style="height: 48px;">
              <option>二代身份证</option>
              <option>港澳居民往来内地通行证</option>
              <option>台湾居民来往大陆通行证</option>
              <option>护照（外籍人士）</option>
            </select>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="R_idendity">证件号</label>
            <input type="text" class="form-control" id="R_idendity" placeholder="请选择证件号" oninput = "value=value.replace(/[^\d]/g,'')">
            <div id="R_idendity1" style="color: #FD3F31;display: none;">只能输入长度为18的数字，请重新输入</div>
            <div id="R_idendity2" style="color: #43C608;display: none;">证件号合格</div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="R_phoneA">手机号码</label>
            <input type="text" class="form-control" id="R_phoneA" placeholder="请输入手机号码" oninput = "value=value.replace(/[^\d]/g,'')">
            <div id="R_s_phone2A" style="color: #FD3F31;display: none;">请输入有效的手机号码</div>
            <div id="R_s_phone3A" style="color: #43C608;display: none;">手机号合格</div>
          </div>
        </div>
        <div class="row form-group">
          <div class="col-md-12">
            <label class="label_add" for="R_relation1">关系</label>
            <select class="form-control" id="R_relation1" style="height: 48px;">
              <option>本人</option>
              <option>父母</option>
              <option>子女</option>
              <option>亲人</option>
              <option>朋友</option>
            </select>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-12">
            <%--<button type="button" class="btn btn-default BUTTON" data-dismiss="modal" style="float: right;margin-left: 5%;">关闭</button>--%>
              <input id="closeRelative1" type="button" class="btn btn-primary BUTTON" value="关闭" style="float: right;">
            <input id="modifyRelative" type="button" class="btn btn-primary BUTTON" value="保存" style="float: right;">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>

<script type="text/javascript">
  $(function(){
    var user="<%=session.getAttribute("user")%>";
    var uid = ${user.id};
    var personId = "";

    $("#addPerson").click(function() {
      $('#add_Relative').modal("show");
    });

    $("#phoneA").blur(function() {
      var phoneA = $.trim($("#phoneA").val());
      if(phoneA.length !=11 ) {
        $("#s_phone2A").show();
        $("#s_phone3A").hide();
      } else {
        $("#s_phone2A").hide();
        $("#s_phone3A").show();
      }
    });

    $("#idendity").blur(function() {
      var idendity = $.trim($("#idendity").val());
      if (Number(idendity.value) == "NaN" || idendity.length != 18) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
        $('#idendity1').show();
        $('#idendity2').hide();
      } else {
        $('#idendity2').show();
        $('#idendity1').hide();
      }
    });

    $("#closeRelative").click(function() {
      $("#add_Relative").modal("hide");   //关闭弹出层
      $('#relation').load('${path}/relation');
    });

    $("#closeRelative1").click(function() {
      $("#modify_Relative").modal("hide");   //关闭弹出层
      $('#relation').load('${path}/relation');
    });

    //添加自然人
    $("#saveRelative").click(function() {
      var personName = $.trim($("#personName").val());
      var idType = $.trim($("#idType").val());
      var idendity = $.trim($("#idendity").val());
      var phone = $.trim($("#phoneA").val());
      var email = "213153122@163.com";
      var relation = $.trim($("#relation1").val());
      $.ajax({
        type: 'POST',
        url: '/person/addPerson',
        dataType: "json",
        data: {personName:personName,idType:idType,idendity:idendity,phone:phone,email:email,relation:relation,remark:""},
        error: function () {
          console.log("失败");
        },
        success: function (data) {
          alert("添加成功");
          $("#add_Relative").modal("hide");   //关闭弹出层
          $('#relation').load('${path}/relation');
        }
      });
    });



    //修改自然人
    $("#modifyRelative").click(function() {
      console.log("修改失败");
      var R_personName = $.trim($("#R_personName").val());
      var R_idType = $.trim($("#R_idType").val());
      var R_idendity = $.trim($("#R_idendity").val());
      var R_phone = $.trim($("#R_phoneA").val());
      var R_email = "594762959@qq.com";
      var R_relation = $.trim($("#R_relation1").val());
      $.ajax({
        type: 'POST',
        url: '/person/updatePerson',
        dataType: "json",
        data: {personId:personId,personName:R_personName,idType:R_idType,idendity:R_idendity,phone:R_phone,email:R_email,relation:R_relation,remark:"",isValue:"有效"},
        error: function () {
          alert("修改失败");
        },
        success: function (data) {
          alert("修改成功");
          $('#modify_Relative').modal("hide");
          $('#relation').load('${path}/relation');
        }
      });
    });

    //根据用户id获取所有关联人
    $.ajax({
      type: 'POST',
      url: '/person/findAllPerson',
      dataType: "json",
      data: {},
      error: function () {
        console.log("失败");
      },
      success: function (result) {
        var str = "";
        for (var key in result) {
          console.log(result[key]);
          str += '<div class="info">';
          str += '    <div class="info-main" style="margin-left: 10%; margin-bottom: 20px;border-bottom: 1px solid #ebebeb;">';
          str += '      <div class="row" style="display: inline-block;">';
          str += '        <label>';
          str += '          用户名：</label>'+ result[key].name +'';
          str += '          <button class="updatePerson BUTTON" id="'+ result[key].id +'" style="height: 30px;margin-left: 8%;">修改关联人</button>';
          str += '          <button class="deletePerson BUTTON" id="'+ result[key].id +'" style="height: 30px;margin-left: 5%;">删除关联人</button>';
          str += '      </div>';
          str += '      <div class="row">';
          str += '        <label>';
          str += '          用户ID：</label>' + result[key].id + '</div>';
          str += '      <div class="row">';
          str += '        <label>';
          str += '          邮箱：</label>' + result[key].email + '</div>';
          str += '      <div class="row">';
          str += '        <label>';
          str += '          关系：</label>' + result[key].relation + '</div>';
          str += '      <div class="row">';
          str += '        <label>';
          str += '          手机号：</label>' + result[key].phone + '</div>';
          str += '      <div class="row">';
          str += '        <label>';
          str += '          证件号：</label>' + result[key].identity + '(' + result[key].idType + ')</div>';
          str += '    </div>';
          str += '</div>';
        }
        $('#person').html(str);

        //删除关联人
        $("#person .deletePerson").click(function() {
          personId = $(this).attr('id');   //获设置选中的受保人
          console.log(personId);
          if(confirm('确定要删除联系人吗?')) {
            $.ajax({
              type: 'POST',
              url: '/person/deletePerson',
              dataType: "json",
              data: {personId:personId},
              error: function () {
                console.log("失败");
              },
              success: function (data) {
                alert("已删除该关联人信息");
                $('#relation').load('${path}/relation');
              }
            });
            return true;
          }
          return false;
        });
        $("#person .updatePerson").click(function() {
          personId = $(this).attr('id');   //获设置选中的受保人
          $.ajax({
            type: 'POST',
            url: '/person/selectPerson',
            dataType: "json",
            data: {id: personId},
            error: function () {
              console.log("失败");
            },
            success: function (result) {
              console.log(result);
              $("#R_personName").val(result.name);
              $("#R_idendity").val(result.identity);
              $("#R_phoneA").val(result.phone);
              $("#R_idendity").blur(function () {
                var idendity = $.trim($("#R_idendity").val());
                if (Number(idendity.value) == "NaN" || idendity.length != 18) {  //当输入不是数字的时候，Number后返回的值是NaN;然后用isNaN判断。
                  $('#R_idendity1').show();
                  $('#R_idendity2').hide();
                } else {
                  $('#R_idendity2').show();
                  $('#R_idendity1').hide();
                }
              });
              $("#R_phoneA").blur(function () {
                var phone = $.trim($("#R_phoneA").val());
                if (phone.length != 11) {
                  $("#R_s_phone2A").show();
                  $("#R_s_phone3A").hide();
                } else {
                  $("#R_s_phone2A").hide();
                  $("#R_s_phone3A").show();
                }
              });

              $('#modify_Relative').modal("show");
            }
          });
        });

      }
    });
  });

</script>
<style>
  .BUTTON {
    background: #3D608F;
    color: #FFFFFF !important;
    border: 1px solid #3D608F;
    border-radius: 15px;
  }
  .label_add{
    font-size: 1rem;
    font-weight: normal;
  }
</style>

</html>